<template>
  <view class="container">
    <!-- 头部 -->
    <view class="header">
      <text class="title">管理收货地址</text>
      <button class="btn" @click="goToAddAddress">新建</button>
    </view>

    <!-- 地址列表 -->
    <view class="address-list">
      <view 
        class="address-item" 
        v-for="(item, index) in addressList" 
        :key="index"
      >
        <view class="name-phone">
          <text class="name">{{item.name}}</text>
          <text class="phone">{{item.phone}}</text>
        </view>
        <view class="address-detail">
          {{item.city}}{{item.department}}{{item.houseNumber}}
        </view>
        <text class="edit-btn" @click.stop="editAddress(item)">编辑</text>
      </view>
    </view>
  </view>
</template>

<script>
import config from "@/config.js";

export default {
  data() {
    return {
      addressList: []
    }
  },
  onLoad() {
    this.fetchAddressList();
  },
  onShow() {
    // 从编辑页面返回时刷新列表
    this.fetchAddressList();
  },
  methods: {
    // 获取地址列表
    async fetchAddressList() {
      try {
        uni.showLoading({ title: '加载中...' });
        const response = await uni.request({
          url: `${config.api_host}/data`,
          method: 'GET'
        });
        if (response.statusCode === 200) {
          // 这里确保response.data是数组类型
          if (Array.isArray(response.data)) {
            this.addressList = response.data;
          } else {
            console.error('返回的数据不是数组类型');
            this.addressList = [];
          }
        } else {
          throw new Error(`获取地址失败: ${response.statusCode}`);
        }
      } catch (error) {
        console.error('获取地址错误:', error);
        uni.showToast({
          title: error.message || '获取地址失败',
          icon: 'none'
        });
      } finally {
        uni.hideLoading();
      }
    },

    // 跳转到添加地址页面
    goToAddAddress() {
      uni.navigateTo({
        url: '/pages/add/address'
      });
    },

    // 编辑地址
    editAddress(item) {
      uni.navigateTo({
        url: `/pages/add/edit-address?id=${item._id}`
      });
    }
  }
}
</script>

<style>
.container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.btn {
  background-color: #07c160;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  margin-right: 0px;
}

.address-list {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.address-item {
  padding: 15px;
  border-bottom: 1px solid #eee;
  position: relative;
}

.address-item:last-child {
  border-bottom: none;
}

.name-phone {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.name {
  font-weight: bold;
}

.address-detail {
  color: #666;
  line-height: 1.5;
}

.edit-btn {
  color: #07c160;
  text-decoration: none;
  margin-top: 10px;
  display: inline-block;
}
</style>    